<template>
  <div class="tab">
    <div>
    <img
      v-for="(item,index) in list"
      :key="item.id"
      :src="item.url"
      alt="暂无图片"
      class="img1"
      v-show="index==currentIndex"
    />
    </div>
    <img
      v-for="(item,index) in list"
      :key="item.id"
      :src="item.url"
      alt="暂无图片"
      class="img"
      @click="handleChange(index)"
    />
    <div class="left">
      <img src="../../public/images/left.png" alt="" @click="left" />
    </div>
    <div class="right">
      <img src="../../public/images/right.png" alt="" @click="right"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0, //当前所在图片下标
      publicUrl: "https://s1.ax1x.com/2023/03/12/ppMcsZn.jpg",
      list: [
        {
          id: 1,
          url: "https://s1.ax1x.com/2023/03/12/ppMcsZn.jpg",
        },
        {
          id: 2,
          url: "https://s1.ax1x.com/2023/03/12/ppMcyaq.jpg",
        },
        {
          id: 3,
          url: "https://s1.ax1x.com/2023/03/12/ppMc6I0.jpg",
        },
        {
          id: 4,
          url: "https://s1.ax1x.com/2023/03/12/ppMcgiV.jpg",
        },
      ],
    };
  },
  methods: {
    handleChange(index) {
      this.currentIndex=index;
    },
    left(){
      this.currentIndex++
      if(this.currentIndex==4){
        this.currentIndex = 0;
      }
    },
    right() {
      this.currentIndex--
      if (this.currentIndex == -1) {
        this.currentIndex = 3;
      }
    }
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.tab{
  width: 800px;
  margin: auto;
}
.img {
  width: 200px;
  height: 200px;
}
.img1 {
  width: 500px;
  height: 300px;
}
.left{
  position: fixed;
  left: 310px;
  top: 120px;
}
.right{
  position: fixed;
  right:614px;
  top: 120px;
}
</style>
